<template>
  <div>
    <!--面包屑导航区域-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!--            添加权限按钮-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="queryInfo.query"
                    clearable
                    placeholder="请输入内容"
                    @clear="getAllMenuList" @keyup.enter.native="getAllMenuList">
            <el-button slot="append" icon="el-icon-search" @click="getAllMenuList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="openAddMenu">添加权限</el-button>
        </el-col>
      </el-row>
      <!--  表格区域-->
      <el-table v-loading="loading"
                :data="menuInfo"
                border
                height="490"
                stripe>
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="路径" prop="path"></el-table-column>
        <el-table-column label="权限级别" prop="level">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.level===0">目录</el-tag>
            <el-tag v-if="scope.row.level===1" type="warning">菜单</el-tag>
            <el-tag v-if="scope.row.level===2" type="danger">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="菜单状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" @change="menuEnabledChanged(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!--修改-->
            <el-button icon="el-icon-edit" size="mini" type="primary"
                       @click="openEditMenu(scope.row)">修改
            </el-button>
            <!--删除-->
            <el-button icon="el-icon-delete" size="mini" type="danger"
                       @click="deleteMenu(scope.row.id)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 添加权限-->
      <el-dialog
        :visible.sync="addMenuDialog"
        title="添加权限"
        width="30%"
        @close="addMenuClose"
      >
        <!--内容主体区域-->
        <el-form
          ref="addMenuRef"
          :model="addMenu"
          :rules="addMenuRules"
          label-width="90px"
          @keyup.enter.native="addMenuYes">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="addMenu.name"></el-input>
          </el-form-item>
          <el-form-item label="权限路径" prop="pattern">
            <el-input v-model="addMenu.pattern" placeholder="格式为:/**/**/**"></el-input>
          </el-form-item>
          <el-form-item label="访问路径" prop="path">
            <el-input v-model="addMenu.path" placeholder="格式为:/**"></el-input>
          </el-form-item>
          <el-form-item label="权限级别" prop="level">
            <el-select v-model="addMenu.level" placeholder="请选择">
              <el-option
                v-for="item in levelOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="父级菜单" prop="parentId">
            <el-select v-model="addMenu.parentId" placeholder="请选择">
              <el-option
                v-for="item in parentIdOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单图标">
            <el-input v-model="addMenu.icon" placeholder="仅支持element组件库中的图标"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button @click="addMenuDialog = false">取 消</el-button>
                    <el-button type="primary" @click="addMenuYes">确 定</el-button>
                 </span>

      </el-dialog>
      <!--修改权限-->
      <el-dialog
        :visible.sync="editMenuDialog"
        title="修改权限"
        width="30%">
        <el-form ref="editMenuRef"
                 :model="editMenu"
                 :rules="addMenuRules"
                 label-width="80px">
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="editMenu.name"></el-input>
          </el-form-item>
          <el-form-item label="权限路径" prop="name">
            <el-input v-model="editMenu.pattern"></el-input>
          </el-form-item>
          <el-form-item label="访问路径" prop="name">
            <el-input v-model="editMenu.path"></el-input>
          </el-form-item>
          <el-form-item label="权限图标">
            <el-input v-model="editMenu.icon"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
                    <el-button @click="editMenuDialog = false">取 消</el-button>
                    <el-button type="primary" @click="ediMenuYes">确 定</el-button>
                </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui'
import { powList } from '@/api/emsboot/api'
import { changeMenuEnable } from '../../api/emsboot/api'

export default {
  data() {
    return {
      queryInfo: {
        query: null
      },
      loading: false,
      menuInfo: [],
      addMenuDialog: false,
      addMenu: {
        name: '',
        pattern: '',
        level: null,
        path: '',
        parentId: null,
        enable: false,
        icon: 'el-icon-menu'
      },
      addMenuRules: {
        name: [{ required: true, message: '请填写权限名称', trigger: 'blur' }],
        pattern: [{ required: true, message: '请填写权限路径', trigger: 'blur' }],
        path: [{ required: true, message: '请填写访问路径', trigger: 'blur' }],
        level: [{ required: true, message: '请选择权限级别', trigger: 'change' }],
        parentId: [{ required: true, message: '请选择父级菜单', trigger: 'change' }]

      },
      levelOptions: [
        {
          label: '目录',
          value: 0
        },
        {
          label: '菜单',
          value: 1
        },
        {
          label: '按钮',
          value: 2
        }],
      parentIdOptions: [],
      editMenuDialog: false,
      editMenu: {}
    }
  },
  created() {
    this.getAllMenuList()
  },
  methods: {
    async getAllMenuList() {
      this.loading = true
      powList(this.queryInfo).then((res)=>{
        if (!res) return
        this.menuInfo = res.obj
        this.loading = false
      })
    },
    async menuEnabledChanged(menuInfo) {
      changeMenuEnable('/staff/changeMenuEnable/' + menuInfo.id + '/' + menuInfo.enable).then((res)=>{
        if (!res) {
          menuInfo.enable = !menuInfo.enable
        }
        location.reload()
      })

    },
    openAddMenu() {
      this.addMenuDialog = true
      const arr = [{
        name: '无',
        id: 1
      }]
      for (let i = 0; i < this.menuInfo.length; i++) {
        if (this.menuInfo[i].level !== 2) {
          arr.push(this.menuInfo[i])
        }
      }
      this.parentIdOptions = arr
      // console.log(this.parentIdOptions);
    },
    addMenuClose() {
      // const addMenuClose = {
      //     name: '',
      //     pattern: '',
      //     level: null,
      //     path: '',
      //     parentId: null,
      //     enable: false,
      //     icon: 'el-icon-menu'
      // };
      // this.addMenu = addMenuClose;
      this.$refs.addMenuRef.resetFields()
    },
    addMenuYes() {
      this.$refs.addMenuRef.validate(async valid => {
        if (!valid) {
          return
        }
        const res = await this.$http.post('/staff/addPow', this.addMenu)
        if (!res) return
        this.getAllMenuList()
        this.addMenuDialog = false
      })
    },
    deleteMenu(MenuId) {
      MessageBox.confirm('此操作将永久删除权限, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const res = this.$http.delete('/staff/deletePow/' + MenuId)
        this.getAllMenuList()
      }).catch(() => {
        Message({
          type: 'info',
          message: '已取消删除'
        })

      })
    },
    openEditMenu(MenuInfo) {
      this.editMenuDialog = true
      this.editMenu = MenuInfo
    },
    ediMenuYes() {
      this.$refs.editMenuRef.validate(async valid => {
        if (!valid) return
        const res = await this.$http.put('/staff/editPow', this.editMenu)
        if (!res) return
        this.getAllMenuList()
        this.editMenuDialog = false
        location.reload()
      })
    }

  }
}
</script>

<style scoped>

</style>
